<template>
	<view class="user">
		<view class="top">
			<view class="group" @click="toUserInfo">
				<view class="userinfo">
					<view class="pic">
						<image 
							v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url"
							:src="userInfo.avatar_file.url" 
							mode="aspectFill"></image>
						<image v-else src="/static/user-default.jpg" mode="aspectFill"></image>
					</view>
					<view class="text" v-if="hasLogin">
						<view class="nickname">{{ userInfo.nickname || userInfo.username || userInfo.mobile }}</view>
						
						<view v-if="userInfo.register_date" class="year">
							<uni-dateformat :date="userInfo.register_date" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
							注册
						</view>
					</view>
					<view class="text" v-else>
						<view class="nickname">点击登录</view>
					</view>
					
				</view>
				
				<view class="more">
					<text class="iconfont icon-a-10-you"></text>
				</view>
			</view>
			
			<view class="bg">				
				<image 
					v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url"
					:src="userInfo.avatar_file.url" 
					mode="aspectFill"></image>
				<image v-else src="/static/user-default.jpg" mode="aspectFill"></image>
			</view>
		</view>
		
		<view v-if="hasLogin" class="main">
			<view class="list">
				
				<view class="group">	
					<view class="item">
						<view class="left">
							<u-icon class="iconfont" name="bookmark" size="24"></u-icon>
							<text class="text">我添加的</text>
						</view>
						<view class="right">
							<u-badge inverted max="99" :value="totalList || '无'"></u-badge>
						</view>
					</view>	
					<view @click="viewInfo" class="item">
						<view class="left">
							<u-icon class="iconfont" name="account" size="24"></u-icon>
							<text class="text">个人信息</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="18"></u-icon>
						</view>
					</view>	
				</view>
				
				<view class="group">
					<view class="item" @click="logout">
						<view class="left">
							<u-icon class="iconfont" name="share-square" size="24"></u-icon>
							<text class="text">退出登录</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="18"></u-icon>
						</view>
					</view>					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import { 
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				totalList: 0
			}
		},
		computed:{
			userInfo() {
				return store.userInfo
			},
			hasLogin(){
				return store.hasLogin
			}
		},
		watch: {
			hasLogin(oldV, newV) {
				if (oldV != newV) {
					this.getTotal()
				}
			}
		},
		onPullDownRefresh() {
			if (!this.hasLogin) {
				uni.stopPullDownRefresh()
				return
			}
			mutations.updateUserInfo().then(res => {
				uni.stopPullDownRefresh()
			})
		},
		onShow() {
			this.getTotal()
		},
		onLoad() {
			// console.log(this.userInfo)
		},
		methods: {
			getTotal() {
				db.collection('hxs-list').where({
					userid: this.userInfo._id
				}).get().then(res => {
					this.totalList = res.result.data.length
				})
			},
			toUserInfo() {
				if (!this.hasLogin) {
					let route = this.$mp.page.route
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/'+route
					})
				}
			},
			viewInfo() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			},
			logout() {
				mutations.logout()
			}
		}
	}
</script>

<style lang="scss" scoped>
.user {
	height: 100%;
	.top {
		height: 360rpx;
		background: #bbb;
		padding:0 30rpx;
		padding-top:var(--status-bar-height);
		position: relative;
		display: flex;
		align-items: center;
		.group {
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color: #fff;
			.userinfo {
				display: flex;
				width: 100%;				
				align-items: center;				
				.pic {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border:2px solid #fff;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					padding-left:20rpx;
					.nickname  {
						font-size: 44rpx;
						font-weight: 600;
					}
					.year {
						font-size: 26rpx;
						opacity: 0.6;
						padding-top:5rpx;
					}
				}
			}
			.more {
				.iconfont {
					font-size: 40rpx;
				}
			}
			
		}
		.bg {
			position: absolute;
			top: 0;
			left:0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				filter: blur(20px);
				transform: scale(2);
				opacity: 0.5;
			}
		}
	}

	.main{
		width: 100%;
		min-height: 200rpx;
		background: #fff;
		border-radius: 30rpx;
		transform:translateY(-30rpx);
		// padding:30rpx 0;
		.info{
			padding:10rpx 30rpx;
			display: flex;
			font-size: 30rpx;
			.item{
				padding-right: 20rpx;
				color:#888;
				text{
					font-weight: 600;
					color:#333;
				}
			}
		}
		.list{
			.group{
				padding:15rpx 30rpx;
				border-bottom:15rpx solid #f4f4f4;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:25rpx 0;
					font-size: 36rpx;
					color:#555;
					border-bottom:1rpx solid #f8f8f8;
					.left{
						display: flex;
						align-items: center;
						.iconfont{
							font-size: 38rpx;
							margin-right: 10rpx;
						}
					}
					.right{
						.iconfont{
							font-size: 26rpx;
						}
					}
				}
				.item:last-child{
					// border: none;
				}
			}
			.group:last-child{
				// border:none;
			}
		}
	}
}
</style>
